<template>
  <div class="dam-home">
    <damHeader :headerNavIndex="0" />
    <div class="dam-container">
      <div class="dam-home-body">
        <div class="banner-bome">
          <div class="title">WELCOME TO THE GAP BRAND PORTAL</div>
          <!-- <div class="desc">
            Here, you will be able to browse through the latest campaigns,
            search for assets by specific attributes, and download approved
            photography. For assistance or questions, please contact your WebDAM
            Administrator or visit www.DAMSuccess.com. The User Guide is also
            available above.
          </div> -->
        </div>
        <div class="home-search">
          <Input
            placeholder="search"
            v-model="keyWords"
            size="large"
            @keyup.enter.native="damSearch"
          >
            <Button slot="append" @click="damSearch" icon="ios-search"></Button>
          </Input>
        </div>
        <div class="nav-list-home">
          <div
            class="item"
            @click="tapScreen(item)"
            v-for="(item, index) in navList"
            :key="index"
          >
            <div class="name">{{ item.categoryName }}</div>
            <div class="img">
              <img
                class="default-img"
                :src="item.pictureUrl"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import damHeader from "../../components/dam-header/dam-header";
import { damHomeApi } from "@/api/dam-home.js";
export default {
  name: "damHome",
  components: {
    damHeader,
  },
  data() {
    return {
      navList: [],
      keyWords: "",
    };
  },
  created() {
    this.getQueryRoot();
  },
  methods: {
    damSearch() {
      if (this.keyWords == "") return;
      this.$router.push({
        name: "damScreen",
        params: {
          key: this.keyWords
        }
      });
    },
    tapScreen(item) {
      console.log(item)
      this.$router.push({
        name: "damScreen",
        params: {
          id: item.id
        }
      });
    },
    async getQueryRoot() {
      console.log(12341);
      try {
        this.tableLoading = true;
        let res = await damHomeApi.getQueryRoot({});
        console.log(res);
        this.navList = res.data;
        this.tableLoading = false;
      } catch (e) {
        //TODO zhuoda sentry
        console.error(e);
        this.tableLoading = false;
      }
    },
  },
};
</script>
<style scoped lang='less'>
@import "./dam-home.less";
</style>